<template>
  <div class="shopbg">
    <!-- 轮播图 -->
    <div class="mui-card lunbo">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotu" :key="item.alt">
              <img :src="item" alt="item.alt">
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
    <div class="mui-card over">
      <div class="mui-card-header">{{shopinfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="pice">
            <span class="old">市场价:￥{{shopinfo.trueprice}}</span>
            <span class="nowpice">销售价：￥{{shopinfo.price}}</span>
          </div>
          <div class="shopnum">购买数量：
            <numbox :curVal="1" :minVal="1" :maxVal="Number(shopinfo.units)" @getNumber="getNumber"></numbox> 
                  <transition 
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
			@enter-cancelled="enterCanle"
			>
				
				<div class="ball" v-show="flag"  id="ball" ref="ball"></div>
			</transition>
          </div>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="small">立即购买</mt-button>
        <mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{shopinfo.sphh}}</p>
          <p>库存情况：{{shopinfo.units}}</p>
          <p>上架时间：{{shopinfo.uptime | formatDate}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain class="goinfo" @click="goinfo(id)">图文详情</mt-button>
        <mt-button type="danger" size="large" plain class="goinfo" @click="gocmts(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
//import mui from '../../lib/mui/js/mui.min.js'
import {Debounce,Throttle} from '../../tools.js'
import numbox from './number-box.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      shopinfo: {},
      lunbotu: [],
      flag: false,
      goodsnum:1,
    };
  },
  mounted() {
    //mui('.mui-numbox').numbox()
  },
  methods: {
    //动画钩子
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      var ballPosition = this.$refs.ball.getBoundingClientRect();
      var rectObject = document.getElementById("badge").getBoundingClientRect();
      var dsitanceTop =rectObject.top- ballPosition.top ;
      var disatanceLeft =rectObject.left -ballPosition.left ;
      el.style.transform = "translate("+disatanceLeft+"px,"+dsitanceTop+"px)";
      el.style.transition = "all .4s ease";
      done(); //done 其实就是afterEnter函数
    },
    afterEnter(el) {
      this.flag = false;
    },
    enterCanle(el) {},

    getlunbo() {
      this.$http
        .get("http://192.168.0.104/linshi/api/get_shoparc.php?id="+this.id)
        .then(res => {
          if (res.status == 200) {
            this.lunbotu = res.body.lunbo;
            this.shopinfo = res.body.shopinfo;
            console.log(res.body.shopinfo);
          }
        });
    },
    gocmts(id) {
      this.$router.push("/home/newlist/comments/" + id);
    },
    goinfo(id) {
      this.$router.push("/home/goodslist/goodsinfo-m/" + id);
    },
    getNumber(val) {
        this.goodsnum= val;
            console.log("This is value of input ", val);
        },
    addShopCar:Debounce(function(){
      this.flag=!this.flag;
      var shopitem={
        id:this.shopinfo.id,
        price:this.shopinfo.price,
        goodsname:this.shopinfo.title,
        thumb:this.shopinfo.litpic,
        count:parseInt(this.goodsnum),
        isSelceted:true,
      }
      this.$store.commit('addToCar',shopitem)
         
    },500),  
  },
  components: {
   numbox,
  },
  created() {
    this.getlunbo(); 
  },
   watch: {
    "shopinfo":function(){
        this.$emit("changTit",true,'商品详情-'+this.shopinfo.title);
    },
  }
}
</script>

<style lang="scss" scoped>
.shopbg {
  background: #eeeeee;
  padding-top: 20px;
  .lunbo {
    margin-top: 0;
  }
}
.over{overflow:inherit;}
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    text-align: center;
    background: #f5f5f5;
  }
}
img {
  height: 100%;
}
.pice {
  .nowpice {
    font-size: 16px;
    color: red;
    font-weight: bold;
  }
  .old {
    text-decoration: line-through;
  }
}
.shopnum {
  margin-top: 5px;position: relative;
  .mui-numbox {
    height: 30px;
    
  }
}
.mui-card-footer {
  display: block;
}
.goinfo {
  margin-top: 10px;
}
.ball {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  left: 132px;
  top: 10px;
  z-index: 999;
}
</style>
